<script setup lang="ts">
import type { MovieItem } from "~/types";
import { trim } from "lodash-es";

defineProps<{
  record: MovieItem;
}>();

const clearDescHandle = (desc: string) => {
  const split = desc.split("电影天堂");
  return split[0];
};
</script>
<template>
  <NuxtLink :to="`/play/video/${record.id}`" pb2>
    <div flex mb-20px bg-black p-3 rounded>
      <div
        w-180px
        block
        bg-gray4:10
        p1
        class="aspect-10/16"
        transition
        duration-400
        hover="scale-105 z10"
      >
        <NuxtImg
          v-if="record.cover"
          width="400"
          height="600"
          format="webp"
          :src="record.cover"
          :alt="record.movieName"
          w-full
          h-full
          object-cover
          :style="{
            'view-transition-name': `item-${record.id}`,
          }"
        />
        <div v-else h-full op10 flex>
          <div i-ph:question ma text-4xl />
        </div>
      </div>
      <div ml-10px w-800px>
        <div font-bold op80 max-w-320px>
          {{ record.movieName }}
        </div>
        <div mt-10px op-70>
          <span>导演：</span><span>{{ record.director }}</span>
        </div>
        <div mt-10px op-70 line-clamp-3>
          <span>演员：</span><span break-all>{{ record.actor }}</span>
        </div>
        <div mt-10px op-70>
          <span>类型：</span><span>{{ record.tags }}</span>
        </div>
        <div mt-10px op-70>
          <span>年代：</span><span>{{ record.year }}</span>
        </div>
        <div mt-10px op-70>
          <span>地区：</span><span>{{ record.region }}</span>
        </div>
        <div op70 mt-10px line-clamp-6 w-full text-14px mb-10px>
          简介： {{ clearDescHandle(trim(record?.desc)) }}
        </div>
      </div>
    </div>
  </NuxtLink>
</template>

<style scoped></style>
